<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="false" title="购物车" :border-bottom="false" :title-bold="true"
				:background="background"></u-navbar>
		</view>
		<!-- 管理 -->
		<view class="edit" @click="editOpen">
			<span v-if="edit">完成</span>
			<span v-else>编辑</span>
		</view>
		<!-- 商品数据 -->
		<view class="goodsList" v-if="cartList.length>0">
			<view class="goodsListBox">
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in cartList" :key="item.id"
					@click="click" @open="open" :options="options">
					<view class="item container_br jsbc">
						<view class="select" @click="selectOne(item.id)">
							<u-icon v-if="addList.includes(item.id)" size="32" :name="'/static/icon/xz.png'"></u-icon>
							<u-icon v-else size="32" :name="'/static/img/unselect.png'"></u-icon>
						</view>
						<view class="goods jsb" v-if="item.goods.images_format">
							<view class="left">
								<image :src="item.goods.images_format[0]" mode="widthFix" style="width: 160rpx;"></image>
							</view>
							<view class="right">
								<view class="name">
									{{item.goods.name}}
								</view>
								<view class="type" v-if="item.goods_sku_id">
									规格 {{item.skus_name||""}}
								</view>
								<view class="price_num jsb">
									<view class="price">
										￥{{item.goods.price}}
									</view>
									<view class="num">
										<u-number-box :min="Number(1)" v-model="item.goods_number" :disabled-input="true"
											@plus="addNumber(item)" @minus="reduceNumber(item)"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action>

			</view>
		</view>
		<view class="noData" style="width: 410rpx; height: 240rpx; margin: 60rpx auto; text-align: center;" v-else>
			<image src="../../static/img/empty.png" mode="widthFix" style="width: 410rpx; height: 240rpx;"></image>
			<text>你的购物车空空如也~</text>
		</view>
		<!-- 结算 -->
		<view class="settlement container_B jsbc">
			<view class="left flc">
				<view class="allSelecct flc" @click="allSelect">
					<u-icon v-if="isAllSelect" size="32" :name="'/static/icon/xz.png'"></u-icon>
					<u-icon v-else size="32" :name="'/static/img/unselect.png'"></u-icon>
					<span style="margin-left: 10rpx;">全选</span>
				</view>
				<view class="totalPrice" v-if="!edit&&addList.length>0">
					合计: <span class="price">￥{{totalPrice}}</span>
				</view>
			</view>
			<view class="right flc">
				<view class="settlementBtn btn" v-if="!edit" @click="goPay">
					去结算
				</view>
				<view class="delete btn" v-if="edit" @click="deleteSelect">
					删除
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getCartList,
		cartDecrease,
		cartDelete,
		cartIncrease
	} from '@/api/index.js'
	// import {
	// 	setCartBtns,
	// } from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		closeload,
		toast,
		toastC,
		toastload
	} from '../../utils/common'
	import { useCartStore } from '../../stores/cart'
	const useCart = useCartStore()
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				cartList: [],
				// 选择的数据
				addList: [],
				// 编辑开关
				edit: false,
				// 自定义背景颜色
				background: {

					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				// 是否全选
				isAllSelect: false,
				// 总价
				totalPrice: "0.00",
				user_id: "",
				
			}
		},
		onShow() {
			let token = uni.getStorageSync('access_token')||""
			if(token){
				this.init()
			}else{
				uni.showModal({
					title: '提示',
					content: "你还没有登录,是否去登录",
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						console.log(res);
						if (res.confirm == true) {
							uni.navigateTo({
								url: '/pages/wx-login/wx-login'
							})
						}
				
					},
				
				})
			}
		},
		methods: {
			click(index, index1) {
				console.log(this.cartList[index].id);
				if (index1 == 0) {
					this.deleteCart(this.cartList[index].id)
					this.cartList.splice(index, 1);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.cartList[index].show = true;
				this.cartList.map((val, idx) => {
					if (index != idx) this.cartList[idx].show = false;
				})
			},
			init() {
				this.cartList=[]
				getCartList().then(res => {
					if (res.data.length > 0) {
						res.data.forEach(item=>{
							if(item.goods_sku_id){
								this.cartList.push({
									...item,
									skus_name:JSON.parse(item.goods_sku.skus)[0].name
								})
							}else{
								this.cartList.push(item)
							}
						})
						
					}else{
						this.cartList = []
					}
					console.log(this.cartList);
				})

			},
			editOpen() {
				this.edit = !this.edit
			},
			// 单选
			selectOne(id) {
				let index = this.addList.findIndex(item => item == id)
				let findIndex = this.cartList.findIndex(item => item.id == id)
				if (index == -1) {
					this.addList.push(id)

				} else {
					this.addList.splice(index, 1)

				}
				if (this.addList.length == this.cartList.length) {
					this.isAllSelect = true
				} else {
					this.isAllSelect = false
				}
				this.computerPrice()
			},
			// 全选
			allSelect() {
				if (this.addList.length > 0 && this.addList.length != this.cartList.length) {
					this.addList = []
					this.totalPrice = 0
				}
				this.cartList.forEach(item => {
					this.selectOne(item.id)
				})
			},
			addNumber(item){
				toastload()
				cartIncrease({
					cart_id:item.id,
					goods_number:1
				}).then(res=>{
					if(res.code==200){
						this.init()
						this.computerPrice()
					}
					closeload()
				})
			},
			reduceNumber(item){
				if(item.goods_number==1){
					return
				}
				toastload()
				cartDecrease({
					cart_id:item.id,
					goods_number:1
				}).then(res=>{
					if(res.code==200){
						this.init()
						this.computerPrice()
					}
					closeload()
				})
			},
			
			computerPrice() {
				this.totalPrice = 0
				let arr = []
				this.addList.forEach(item => {
					this.cartList.forEach(c => {
						if (item == c.id) {
							arr.push(c)
						}
					})
				})
				arr.forEach(item => {
					this.totalPrice = Number(this.totalPrice) + Number(item.goods.price)*Number(item.goods_number)
				})
				this.totalPrice = Number(this.totalPrice).toFixed(2)
			},
			deleteSelect() {
				if (this.addList.length == 0) {
					toast("请选择商品")
					return
				}
				console.log(this.addList);
				cartDelete({
					cart_ids:this.addList
				}).then(res=>{
					if(res.code==200){
						toast('删除成功')
						this.init()
					}
				})
				
				
			},
			deleteCart(id) {
				console.log("我要删除", id);
				cartDelete({
					cart_ids:[id]
				}).then(res => {
					if (res.code ==200) {
						toast("删除成功")
						this.init()
					}
				})
			},
			goPay() {
				let arr = []
				this.addList.forEach(item => {
					this.cartList.forEach(c => {
						if (c.id == item) {
							arr.push(c)
						}
					})
				})
				console.log(arr);
				this.addList = []
				this.cartList =[]
				this.isAllSelect = false
				this.totalPrice =""
				useCart.addCartOrder(arr)
				setTimeout(() => {
					uni.navigateTo({
						url: '/page/cart_orderConfirm/cart_orderConfirm'
					})
				}, 500)
			}

		}

	}
</script>

<style scoped lang="scss">
	.price {
		color: #F55945;
	}

	.edit {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		text-align: right;
		font-size: 32rpx;
		background-color: #fff;
	}

	.goodsList {
		margin-top: 20rpx;
		width: 750rpx;
		height: calc(100vh - 380rpx);
		overflow: auto;

		&::-webkit-scrollbar {
			display: none;
		}

		.goods {
			width: 620rpx;
		}

		.item .left {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			background-color: #f8f8f8;
		}

		.item .right {
			width: 420rpx;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
			}

			.type {
				color: #999999;
			}

		}
	}

	// 结算
	.settlement {
		position: fixed;
		bottom: 0rpx;
		left: 0;

		.allSelecct {
			margin-right: 15rpx;
		}

		.btn {
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;

		}

		.settlementBtn {
			color: #fff;
			background: #F5CE31;
		}

		.collect {
			border: 1rpx solid #dedede;
			color: #333;
			margin: 0 10rpx;
		}

		.delete {
			border: 1rpx solid #dedede;
			color: #F55945;
			margin: 0 10rpx;
		}
	}
</style>